<template>
	<view class="repair-wrap">
		<view class="repair-box  u-p-l-50 u-p-r-50" style="margin-top: -20px;">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name">
						<h4><span class="important">*</span>发布类型：</h4>
					</view>

					<radio-group @change="typeBtn">
						<!--  v-model="ruleForm.release_type" -->
						<label>
							<view style="display: flex;">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<radio color="#4c800f" :checked="ruleForm.release_type == 1" :label="1" :value="1"
										style="transform:scale(0.7)" checked="checked" />
									<view style="margin-top: 4rpx;">出租</view>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;">
									<radio color="#4c800f" :checked="ruleForm.release_type == 2" :label="2" :value="2"
										style="transform:scale(0.7)" />
									<view style="margin-top: 4rpx;">出售</view>
								</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>

		<view class=" u-p-l-50 u-p-r-50"
			style="background: #FFFFFF;border-radius: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);margin-top: -20px;">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name" style="width: 90px;">
						<h4>楼宇号：</h4>
					</view>
					<view>
						<h4>{{building[index].name}}</h4>
					</view>
				</view>
				<view style="font-size: 12px;margin-top: -14px;margin-left: 2px;color: #999999;">
					提示：如需切换楼宇号,请到主页右上角点击进行切换。
				</view>

				<view class="header-li">
					<view class="header-name" style="width: 90px;">
						<h4>房屋类型：</h4>
					</view>
					<view>
						<h4>{{buildings.room_nature}}</h4>
					</view>
					<view><span style="font-size: 16px;">({{buildings.room_area_of_structure}}平方米)</span></view>
				</view>
				<view class="header-li">
					<view class="header-name" style="width: 90px;">
						<h4>地址：</h4>
					</view>
					<view>
						<h4>{{buildings.project_location}}</h4>
					</view>
				</view>
			</view>
		</view>

		<view class="repair-box u-p-l-50 u-p-r-50" style="margin-top: -20px;">
			<view class="header-form">
				<!-- 
					<view class="header-li">
						<view class="header-name"><h4>标题</h4></view>
						<textarea v-model="ruleForm.text_title"  placeholder="请输入" class="text-area"></textarea>
					</view> 
					-->
				<view class="header-li2">
					<view style="display: flex;margin-left: 12px;">
						<view style="width: 80px;">
							<h4><span class="important">*</span>总层数：</h4>
						</view>
						<picker :value="index" @change="totalFloorBtn" :range="totalFloor" range-key="name"
							mode="selector" style="width: 85px;">
							<view class="form-select" style="width: 50px;">
								{{ ruleForm.total_floor }}
							</view>
						</picker>
					</view>
					<view style="display: flex;">
						<view style="width: 100px;">
							<h4><span class="important">*</span>所在楼层：</h4>
						</view>
						<picker :value="index" @change="currentFloorBtn" :range="currentFloor" range-key="name"
							mode="selector" style="width: 85px;">
							<view class="form-select" style="width: 50px;">
								{{ ruleForm.current_floor }}
							</view>
						</picker>
					</view>
				</view>

				<view class="header-li">
					<view class="header-name">
						<h4><span class="important">*</span>户型：</h4>
					</view>
					<picker :value="index" @change="unitTypeBtn" :range="unitType" range-key="name" mode="selector">
						<view class="form-select">{{ ruleForm.house_types }}</view>
					</picker>
				</view>
				<view class="header-li1" style="padding-bottom: 10px;">
					<view style="display: flex;">
						<h4><span class="important">*</span>朝向：</h4>
						<!-- 	:class="item.isOk ? 'bordersCX2' : 'bordersCX'" -->
						<view :class="item.isOk ? 'bordersCX2' : 'bordersCX'" style="margin-left: 10px;"
							v-for="(item,index) in items" @click="orientationBtn(index)">
							<span>{{item.name}}</span>
						</view>

						<!-- <view :style="index==0?'margin-left: 20rpx;':'margin-left: 10rpx;'" 
								v-for="(item,index) in items" @click="orientationBtn(index)">
								<view v-if="ruleForm.orientation" 
								:class="ruleForm.orientation.includes(item.value+'')?'bordersCX3 bordersCX2':'bordersCX2'" >
									{{item.name}}
								</view>
							</view> -->

					</view>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h4><span class="important">*</span>装修程度：</h4>
					</view>
					<view v-if="hxTypeStr=='编辑'">
						<view class="form-select" v-if="ruleForm.renovation == 1">精装修</view>
						<view class="form-select" v-if="ruleForm.renovation == 2">普通装修</view>
						<view class="form-select" v-if="ruleForm.renovation == 3">毛坯房</view>
					</view>
						<picker v-else :value="index" @change="renovationBtn" :range="renovation" range-key="name"
							mode="selector">
							<view class="form-select" v-if="ruleForm.renovationName">{{ ruleForm.renovationName }}</view>
							<view class="form-select" style="color:#999" v-else>请选择</view>
						</picker>
				</view>

				<view class="header-li">
					<view class="header-name" style="width: 80px;">
						<h4><span class="important">*</span>电梯：</h4>
					</view>
					<radio-group @change="elevatorBtn()">
						<label>
							<view style="display: flex;">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<radio color="#4c800f" :checked="ruleForm.elevator == 1" :label="1" :value="1"
										style="transform:scale(0.7)" checked="checked" />
									<view style="margin-top: 4rpx;">有电梯</view>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;">
									<radio color="#4c800f" :checked="ruleForm.elevator == 2" :label="2" :value="2"
										style="transform:scale(0.7)" />
									<view style="margin-top: 4rpx;">无电梯</view>
								</view>
							</view>
						</label>
					</radio-group>
				</view>

			</view>
		</view>


		<view class="repair-box u-p-l-50 u-p-r-50" style="margin-top: -20px;">
			<view class="header-form">

				<view v-show="ruleForm.release_type == 1">
					<view class="header-li">
						<view class="header-name">
							<h4><span class="important">*</span>月租金：</h4>
						</view>
						<textarea v-model="ruleForm.month_rent_money" placeholder="请输入月租金"
							class="text-area"></textarea>元
					</view>
					<view class="header-li">
						<view class="header-name">
							<h4><span class="important">*</span>付款方式：</h4>
						</view>
						<textarea v-model="ruleForm.payment_method" placeholder="如:押一付三、押一付六、年付"
							class="text-area"></textarea>
					</view>

				</view>

				<view v-show="ruleForm.release_type == 2">
					<view class="header-li" style="justify-content: space-between;">
						<view class="header-name" style="width: 110px;">
							<h4><span class="important">*</span>单价/㎡：</h4>
						</view>
						<textarea @input="updateData" v-model="ruleForm.square_meter_price" placeholder="请输入每平方米的单价"
							class="text-area" maxlength="6" pattern="[0-9]{1,6}">
							</textarea>
						<span style="font-weight: 700;">元</span>
					</view>
					<view style="font-size: 12px;margin-top: -14px;margin-left: 27px;color: #999999;">
						提示：单价最高不能查过99万元(字数不超过6位数)。
					</view>
					<view class="header-li" style="justify-content: space-between;">
						<view class="header-name">
							<h4><span class="important">*</span>总金额：</h4>
						</view>
						<span style="font-weight: 700;">{{ruleForm.total_money | moneyFormat}}&nbsp;&nbsp;元</span>
					</view>
				</view>
			</view>
		</view>

		<view class="repair-box u-p-l-50 u-p-r-50" style="margin-top: -20px;">
			<view class="header-form">
				<view style="border-bottom:1rpx solid #EEEEEE;padding-top: 13px;">
					<view class="u-flex u-flex-wrap">

						<view class="header-name" style="margin-top: -18px;">
							<h4><span class="important">*</span>配套设施：</h4>
						</view>
						<view style="margin-bottom: 15px;" :class="item.isOk1 ? 'zhuangxiouCX2' : 'zhuangxiouCX'"
							v-for="(item,index) in facilities" @click="facilitiesBtn(index)">
							<span>{{item.name}}</span>
						</view>

					</view>
				</view>

				<view class="header-li" style="margin-bottom: 13px;">
					<view class="header-name" style="width: 80px;">
						<h4><span class="important">*</span>暖气：</h4>
					</view>
					<radio-group @change="heatingBtn()">
						<label>
							<view style="display: flex;">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<radio color="#4c800f" :checked="ruleForm.hearing_method == 1" :label="1" :value="1"
										style="transform:scale(0.7)" />
									<view style="margin-top: 4rpx;">集体供暖</view>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;">
									<radio color="#4c800f" :checked="ruleForm.hearing_method == 2" :label="2" :value="2"
										style="transform:scale(0.7)" />
									<view style="margin-top: 4rpx;">自采暖</view>
								</view>
								<view style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;">
									<radio color="#4c800f" :checked="ruleForm.hearing_method == 3" :label="3" :value="3"
										style="transform:scale(0.7)" />
									<view style="margin-top: 4rpx;">无暖气</view>
								</view>
							</view>
						</label>
					</radio-group>
				</view>

				<view style="border-bottom:1rpx solid #EEEEEE;margin-bottom: 13px;">
					<view class="header-name" style="display: flex;">
						<h4><span class="important">*</span>
							<!-- 室内图片： -->
						</h4>
						<view @click="uoloadHouse"
							style="color: blue;display: flex;align-items: center; margin-left: 5px;"
							v-if="fileList.length<9">
							<image style="width: 19px;height: 17px;margin-top: -1px;margin-right: 3px;margin-top: 2px;"
								src="../../static/image/upload_images.png" mode=""></image>
							<view style="font-weight: 700;margin-top: 2px;">点击上传室内图片</view>
						</view>
						<view style="margin-top: 2px;margin-left: 4px;"><span
								style="color: #999999FF;">(最多上传9张图片)</span></view>
					</view>

					<view class="guarn-box guarn-box2 u-m-t-20" style="justify-content: space-between;">
						<view class="guarn-box2-img" v-for="(item,index) in fileList" :key='index'>
							<image :src="item"
								style="border-radius: 10rpx;margin-bottom: 10rpx; width: 100%;height: 100%;"
								mode="aspectFill"></image>
							<u-icon @click="colseImg(index)" name="close" color="red" size="40"
								class="guarn-box2-img-close"></u-icon>
						</view>
						<view class="guarn-box2-img" style="opacity: 0;height: 0;">
						</view>
					</view>
				</view>

				<view style="border-bottom:1rpx solid #EEEEEE;margin-bottom: 13px;">
					<view class="header-name" style="display: flex;">
						<!-- <h4 style="margin-left: 8px;">户型图片：</h4> -->
						<view @click="uoloadHouse1"
							style="color: blue;display: flex;align-items: center; margin-left: 5px;"
							v-if="ruleForm.house_images==null||ruleForm.house_images==''">
							<image style="width: 19px;height: 17px;margin-top: -1px;margin-right: 3px;margin-top: 2px;"
								src="../../static/image/upload_images.png" mode=""></image>
							<view style="font-weight: 700;margin-top: 2px;">点击上传户型图片</view>
						</view>
						<view style="margin-top: 2px;margin-left: 4px;"><span
								style="color: #999999FF;">(最多上传1张图片)</span></view>
					</view>
					<view class="guarn-box guarn-box2 u-m-t-30">
						<view class="guarn-box2-img" v-if="ruleForm.house_images">
							<image :src="ruleForm.house_images"></image>
							<u-icon @click="colseImg1(ruleForm.house_images)" name="close" color="red" size="40"
								class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="repair-box u-p-l-50 u-p-r-50">
			<view class="header-form" style="margin-top: 13px;">
				<view class="u-m-t-20 repair-box" style="padding-bottom: 12px;">
					<view class="u-m-b-20 u-p-t-30">
						<h4><span class="important">*</span>房屋介绍：</h4>
					</view>
					<view
						style="border: 1px solid #ddd;border-radius: 10px;background: #e5e5e54d;padding: 10px;height: 100px;">
						<textarea 
							maxlength='-1' 
							v-model="ruleForm.house_introduction" type="textarea"
							style="width: 100%;height: 80px;font-size: 26rpx;" 
							placeholder="请填写房屋介绍,严禁在房屋介绍中填写联系方式,否则系统将会自动删除。" />
					</view>
				</view>
			</view>
		</view>

		<view class="repair-box u-p-l-50 u-p-r-50" style="margin-top: -20px;">
			<view class="header-form">

				<view class="header-li" style="height: 45px;">
					<view class="header-name">
						<h4><span class="important">*</span>联系人：</h4>
					</view>
					<textarea v-model="ruleForm.contact_name" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view style="font-size: 12px;margin-top: -14px;margin-left: 4px;color: #999999;">
					建议：请将全名修改为某先生或某女士,防止信息泄露。
				</view>
				<view class="header-li">
					<view class="header-name">
						<h4><span class="important">*</span>联系方式：</h4>
					</view>
					<textarea v-model="ruleForm.contact_number" placeholder="请输入" class="text-area"></textarea>
				</view>

			</view>
		</view>

		<view style="margin-top: 22px;margin-left: 20px;color: #999999;">
			<span>提示：点击确认发布后此，此信息将会在</span>
			<span style="color: blue;" @click='download()'>助业网的房屋租售</span>
			<span>进行推荐。</span>
		</view>

		<view style="margin-top: 20px;margin-bottom: 50px;">
			<button class="yilingqu" @click="sbumint">{{ruleForm.id==null?'确定发布':'确定编辑并发布'}}</button>
		</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				//保存楼宇ID
				index: 0,
				building: [],

				//发布类型
				indexe: 0,
				typaBtne: [{
						id: 1,
						name: '租'
					},
					{
						id: 2,
						name: '售'
					}
				],
				//户型
				unit: 2,
				unitType: [{
						id: 1,
						name: '大开间'
					},
					{
						id: 2,
						name: '一居室'
					},
					{
						id: 3,
						name: '两居室'
					},
					{
						id: 4,
						name: '三居室'
					},
					{
						id: 5,
						name: '四居室'
					},
					{
						id: 6,
						name: '五居以上'
					}
				],
				//总层数
				total: 0,
				totalFloor: [],
				//所在楼层
				current: 0,
				currentFloor: [],
				//装修程度
				indexs: 0,
				renovation: [{
						id: 0,
						name: '请选择装修程度'
					},
					{
						id: 1,
						name: '精装修'
					},
					{
						id: 2,
						name: '普通装修'
					},
					{
						id: 3,
						name: '毛坯房'
					}
				],
				type: 1,
				//朝向
				items: [{
						value: 1,
						name: '东',
						isOk: false,
					},
					{
						value: 2,
						name: '南',
						isOk: false,
					},
					{
						value: 3,
						name: '西',
						isOk: false,
					},
					{
						value: 4,
						name: '北',
						isOk: false,
					}
				],
				//配套设置1.冰箱2.洗衣机3.空调4.电视5.沙发6.衣柜7.床8.宽带9.热水器10.天然气11.抽油烟机(多选)(租房参数)
				facilities: [{
						value: 1,
						name: '冰箱',
						isOk1: false,
					},
					{
						value: 2,
						name: '洗衣机',
						isOk1: false,
					},
					{
						value: 3,
						name: '空调',
						isOk1: false,
					},
					{
						value: 4,
						name: '电视',
						isOk1: false,
					},
					{
						value: 5,
						name: '沙发',
						isOk1: false,
					},
					{
						value: 6,
						name: '衣柜',
						isOk1: false,
					},
					{
						value: 7,
						name: '床',
						isOk1: false,
					},
					{
						value: 8,
						name: '宽带',
						isOk1: false,
					},
					{
						value: 9,
						name: '热水器',
						isOk1: false,
					},
					{
						value: 10,
						name: '天然气',
						isOk1: false,
					}
				],
				array: ['分类', '分类二'],
				inday: 0,
				ruleForm: {
					id: null,
					user_id: uni.getStorageSync('rawData').userId, //发布人ID
					project_id: null, //项目ID
					area_number: null, //区号
					floor_number: null, //楼号
					unit_number: null, //单元
					house_number: null, //门牌号
					house_type: null, //房屋类型
					built_area: null, //面积
					text_title: null, //文案标题
					release_type: 1, //发布类型 1.租2.售
					house_types: '两居室', //户型
					total_floor: '1层', //总层数
					current_floor: '1层', //所在楼层
					orientation: [], //朝向1.东2.南3.西4.北
					renovation: 0, //精装
					renovationName:'',
					elevator: 1, //电梯1.有2.无
					contact_name: null, //联系人(房租参数)
					contact_number: null, //联系电话(租房参数)
					month_rent_money: null, //月租金额(租房参数)
					payment_method: null, //付款方式(租房参数)
					supporting_facilities: null, //配套设施1.冰箱2.洗衣机3.空调4.电视5.沙发6.衣柜7.床8.宽带9.热水器10.天然气11.抽油烟机(多选)(租房参数)
					build_time: null, //建造时间(售房参数)
					square_meter_price: null, //平方米单价(售房参数)
					total_money: null, //总金额(售房参数)
					hearing_method: 1, //供暖方式1.集体供暖2.自取暖3.无暖气
					indoor_images: null, //室内图
					house_images: null, //户型图
					province_id: null, //省id
					city_id: null, //市ID
					area_id: null, //区ID
					jw_degree: null, //经纬度
					position: null, //位置
					house_introduction: null, //房屋介绍
					room_id: null, //房屋id
				},
				// hourseList:[],//获取楼宇
				housingFlag: false,
				hourseList: [],
				hourseStr: null,
				hourseNum: 0, //选择第几个房间,
				buildings: [],
				show: false,
				fileList: [],
			}
		},
		async onShow() {

			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.chandleHandle()
			this.name = this.homelist.proName;
			this.housingFlag = false
			if (uni.getStorageSync('loginFlag')) {
				this.getHouseList()
			}
			this.homelist.ownerTel

			this.ruleForm.contact_name = this.homelist.ownerName
			this.ruleForm.contact_number = this.homelist.ownerTel

			//增加楼层数
			for (var i = 0; i < 50; i++) {
				let obj = {
					index: i,
					name: i + 1 + '层'
				}
				this.totalFloor.push(obj)
				this.currentFloor.push(obj)
			}
		},
		onLoad(options) {
			if (options.id) {
				this.hxTypeStr = '编辑'
				this.getDetial(options.id)
			} else {
				this.hxTypeStr = '新增'
			}
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		filters: {
			//取截单元,单位  zwl 2022-11-1
			moneyFormat: function(num) {
				if (num == null || num == '') {
					return 0
				}
				let arg = parseInt(num)
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 5) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万"
				} else {
					return num
				}
			}
		},
		methods: {
			//跳转助业网
			download() {
				var link = 'https://s.515f.com/#/pages/rentSell/index'
				// #ifdef H5
				window.open(
					link
				)
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(link);
				// #endif
			},
			//根据id查询回显数据
			getDetial(id) {
				var _this = this;
				this.$request.api.detail({
					id: id,
				}).then(res => {
					let dataInfo = res.data.data;
					console.log(dataInfo, 'dataInfo')
					if (dataInfo != null) {

						_this.ruleForm.id = dataInfo.id //月租金额(租房参数)
						_this.ruleForm.month_rent_money = dataInfo.month_rent_money //月租金额(租房参数)
						_this.ruleForm.payment_method = dataInfo.payment_method //付款方式(租房参数)
						_this.ruleForm.square_meter_price = dataInfo.square_meter_price //平方米单价(售房参数)
						_this.ruleForm.total_money = dataInfo.total_money //总金额(售房参数)
						_this.ruleForm.hearing_method = dataInfo.hearing_method //供暖方式1.集体供暖2.自取暖3.无暖气
						_this.ruleForm.house_images = dataInfo.house_images //户型图
						//alert(_this.ruleForm.house_images)

						_this.ruleForm.house_introduction = dataInfo.house_introduction //房屋介绍
						_this.ruleForm.contact_name = dataInfo.contact_name //联系人
						_this.ruleForm.contact_number = dataInfo.contact_number //联系电话


						_this.ruleForm.release_type = dataInfo.release_type //发布类型 1.租2.售
						_this.ruleForm.total_floor = dataInfo.total_floor //总层数

						_this.ruleForm.current_floor = dataInfo.current_floor //所在层数

						_this.ruleForm.orientation = dataInfo.orientation //朝向
						_this.items.forEach((item) => {
							if (_this.ruleForm.orientation.includes(item.value + '')) {
								item.isOk = true;
							}
						})

						_this.ruleForm.house_types = dataInfo.house_types //户型
						_this.ruleForm.renovation = dataInfo.renovation //装修程度
						_this.ruleForm.elevator = dataInfo.elevator //电梯1.有2.无
						_this.ruleForm.supporting_facilities = dataInfo
							.supporting_facilities //配套设施1.冰箱2.洗衣机3.空调4.电视5.沙发6.衣柜7.床8.宽带9.热水器10.天然气
						_this.facilities.forEach((item) => {
							if (_this.ruleForm.supporting_facilities.includes(item.value + '')) {
								item.isOk1 = true;
							}
						})
						_this.ruleForm.indoor_images = dataInfo.indoor_images //室内图
						_this.fileList = dataInfo.indoor_images;
					}
				})
			},
			//提交按钮
			sbumint() {
				console.log(this.ruleForm.id, 'this.ruleForm.id')

				this.ruleForm.indoor_images = this.fileList.toString();
				//保存朝向多选
				let renovat = [];
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].isOk) {
						renovat.push(this.items[i].value)
					}
				}
				this.ruleForm.orientation = renovat.toString()
				//保存配套设施
				let faci = [];
				for (let j = 0; j < this.facilities.length; j++) {
					if (this.facilities[j].isOk1) {
						faci.push(this.facilities[j].value)
					}
				}
				this.ruleForm.supporting_facilities = faci.toString()

				if (this.ruleForm.id == null) {
					this.$request.api.release(this.ruleForm).then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '发布成功！',
								icon: 'success'
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}, 200)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							});
						}
					})
				} else {
					this.$request.api.rettal(this.ruleForm)
						.then(res => {
							if (res.data.code === 0) {
								uni.showToast({
									title: '编辑成功！',
									icon: 'success'
								});
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/user/user'
									})
								}, 200)
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'error'
								});
							}
						})
				}
			},
			//配套设施
			facilitiesBtn(index) {
				if (this.facilities[index].isOk1) {
					this.facilities[index].isOk1 = false;
				} else {
					this.facilities[index].isOk1 = true;
				}
			},
			//供暖方式
			heatingBtn(value) {
				this.ruleFrom.hearing_method = e.detail.value;
			},
			//电梯
			elevatorBtn(e) {
				this.ruleFrom.elevator = e.detail.value;
			},
			//朝向
			orientationBtn(index) {
				if (this.items[index].isOk) {
					this.items[index].isOk = false;
				} else {
					this.items[index].isOk = true;
				}
				console.log(this.items)
			},
			//户型下拉选择
			unitTypeBtn: function(e) {
				this.unit = e.detail.value
				this.ruleForm.house_types = this.unitType[this.unit].name;
			},
			//总层数下拉选择
			totalFloorBtn: function(e) {
				this.total = e.detail.value
				this.ruleForm.total_floor = this.totalFloor[this.total].name;
			},
			//所在层数下拉选择
			currentFloorBtn: function(e) {
				this.current = e.detail.value
				this.ruleForm.current_floor = this.currentFloor[this.current].name;
			},
			//获取发布类型
			typeBtn: function(e) {
				console.log(e.detail.value, 'e.detail.value;')
				// this.indexe = e.target.value
				// this.ruleForm.release_type = this.typaBtne[this.indexe].id
				this.ruleForm.release_type = e.detail.value;

				console.log(this.ruleForm.release_type, 'this.ruleForm.release_type')
			},
			//获取发布类型
			renovationBtn: function(e) {
				this.indexs = e.target.value
				this.ruleForm.renovation = this.renovation[this.indexs].id
				this.ruleForm.renovationName = this.renovation[this.indexs].name
			},
			//获取房屋基础信息
			chandleHandle() {
				this.$request.api.building({
					room_id: this.homelist.roomId
				}).then(res => {
					this.buildings = res.data.data;
					this.ruleForm.project_id = res.data.data.pro_id; //项目ID
					this.ruleForm.area_number = res.data.data.build_district_code; //区号
					this.ruleForm.floor_number = res.data.data.build_tower_code; //楼号
					this.ruleForm.unit_number = res.data.data.room_unit_number; //单元
					this.ruleForm.house_number = res.data.data.room_code; //门牌号
					this.ruleForm.house_type = res.data.data.room_nature; //房屋类型
					this.ruleForm.built_area = res.data.data.room_area_of_structure; //面积
					this.ruleForm.province_id = res.data.data.project_province; //省id
					this.ruleForm.city_id = res.data.data.project_city; //市ID
					this.ruleForm.area_id = res.data.data.project_district; //区ID
					this.ruleForm.jw_degree = res.data.data.project_longitude_and_latitude; //经纬度
					this.ruleForm.position = res.data.data.project_location; //位置
					this.ruleForm.room_id = res.data.data.room_id; //位置
					this.ruleForm.build_time = res.data.data.project_create_time
				})
			},
			//获取房屋信息
			async getHouseList() {
				let res = await this.$request.api.house({
					mobile: uni.getStorageSync('phone')
				})
				console.log(123123)
				// console.log(res, uni.getStorageSync('phone'))
				if (res.data.data.projectList.length > 0) {
					this.hourseList = res.data.data.projectList
					console.log(this.hourseList)
					if (this.hourseList.length > 0) {
						for (let i = 0; i < this.hourseList.length; i++) {
							//只可以看自己的
							if (this.hourseList[i].roomId == this.homelist.roomId) {
								let obj = {
									id: this.hourseList[i].roomId,
									name: this.hourseList[i].buildDistrictCode + "-" + this.hourseList[i]
										.buildTowerCode + "-" + this.hourseList[i].costsPeriodUnit + "-" + this
										.hourseList[i].roomCode
								}
								this.building.push(obj);
							}
						}
					}
					this.hourseStr = this.hourseList[this.hourseNum]
					uni.setStorageSync('hourseList', res.data.data.projectList)
					console.log('有房屋列表')
					this.housingFlag = true
				} else {
					this.housingFlag = false
				}
			},
			//室内图
			colseImg(val) {
				if (val) {

					let filsArr = this.fileList;
					var index = val; // 要删除的元素的下标

					filsArr.splice(index, 1); // 从数组中删除一个元素

					console.log(filsArr); // 输出: [1, 2, 4, 5]

					this.fileList = filsArr;
				}
			},
			// 选择图片
			uoloadHouse() {
				console.log('+++++++++++++')
				let that = this
				let images = [];

				uni.chooseImage({
					count: 9, //默认9
					success(res) {
						uni.showLoading({
							title: '加载中'
						});

						console.log('res=====', res, that.fileList.length)
						let imgLength = 9 - that.fileList.length
						console.log('imgLength', imgLength)
						images = res.tempFilePaths || []
						if (imgLength > 0 && images.length <= imgLength) {
							for (let i = 0; i < images.length; i++) {
								pathToBase64(images[i]).then(res => {
									uni.request({
										url: 'https://admin.515f.com/api/weixin/applet/base64_to_image_url',
										method: 'POST',
										data: {
											imageBase64: res
										},
										success: res2 => {
											that.fileList.push(res2.data.data);
											// that.uploadNum += 1;
											uni.hideLoading();
										}
									})

								})
							}
						} else {
							uni.showToast({
								title: '最多上传9张照片',
								icon: 'none'
							})
						}


					}
				})
			},
			//室外图
			colseImg1(val) {
				this.ruleForm.house_images = null;
				if (!this.ruleForm.house_images) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse1() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.house_images = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.house_images = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//数入平方米单价--获取总金额
			updateData() {
				//面积
				var area = this.buildings.room_area_of_structure
				if (area > 0) {
					this.ruleForm.total_money = area * this.ruleForm.square_meter_price
				}
				console.log(this.ruleForm.total_money)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #F9A832;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		height: 40px;
		line-height: 40px;
		width: 34%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
	}

	.button1 {
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.button:hover {
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.header-form {
		margin-top: 54rpx;
		background: #FFFFFF;

		.header-li {
			display: flex;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 40px;
			height: 40px;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;

			.header-name {
				width: 200rpx;
			}

			.text-area {
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
				font-size: 26rpx;
			}
		}

		.header-li2 {
			display: flex;
			justify-content: space-around;
			font-weight: 500;
			line-height: 40px;
			height: 40px;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}


	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.foot_item {
		margin-top: 40rpx;
		height: 280rpx;
	}

	.button2 {
		width: 40%;
		height: 30%;
		float: left;
		margin-left: 33px;
		color: #F9A832;
		border: 1px solid #F9A832;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.button_in {
		width: 40%;
		height: 31%;
		float: right;
		background-color: #F9A832;
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.button_renovation {
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}

	.footers {
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.footer {
		width: 95%;
		margin: 40rpx 20rpx;
		// position:fixed;
		// bottom:0px;
		// left:0px;
	}

	.footer-btn {
		// display: flex;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.details {
		color: #FFFFFF;

	}

	.button5 {
		position: relative;
		// left: 264rpx;
		top: -46rpx;
	}

	.payment {
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}

	.payment_img {
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}

	.payment:hover {
		border: 1px solid #F9A832;
		cursor: hand;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.header-li1 {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: 10px;
	}

	.borders1 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
		margin-left: 10px;
	}

	.borders11 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
		color: #F9A832FF;
		margin-left: 10px;
	}

	.borders2 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
		margin-left: 10px;
	}

	.borders22 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
		color: #F9A832FF;
		margin-left: 10px;
	}

	.bordersCX {
		width: 12%;
		line-height: 18px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-left: 10px;
	}

	.bordersCX2 {
		width: 100rpx;
		line-height: 18px;
		border-radius: 17px;
		text-align: center;
		margin-left: 10px;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		color: #F9A832FF;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.zhuangxiouCX {
		width: 20%;
		line-height: 14px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-left: 10px;
		padding: 5px 5px;
	}

	.zhuangxiouCX2 {
		width: 180rpx;
		line-height: 14px;
		border-radius: 17px;
		text-align: center;
		margin-top: 3px;
		margin-left: 10px;
		padding: 5px 5px;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		color: #F9A832FF;
	}

	// .zhuangxiouCX3{
	// 	 border: 1px solid #FFF9A832;
	// 	 background-color: #FFF9A832;
	// 	 color: #F9A832FF;
	// }
	.guarn-box {
		width: 100%;
		// height: 210rpx;
	}

	.guarn-box2 {
		display: flex;
		flex-wrap: wrap;
	}

	.guarn-box2-img {
		width: 210rpx;
		height: 210rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 210rpx;
		height: 210rpx;
	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.guarn-box-txt {
		// width: 418rpx;
		// height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.important {
		color: red !important;
	}
</style>